<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        vue-SSR-demo
      </h1>
      <NuxtLink to="/admin">My Admin</NuxtLink>
      <NuxtLink to="/api/_list">My List</NuxtLink>
      <NuxtLink to="/api/_db/">My DB Manager</NuxtLink>
      <h2 class="bg-red-100 text-green-700">Nuxtjs 购物车模糊查询界面</h2>
      <form class="relative">
        <svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
        </svg>
        <input class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10" type="text" v-model="searchOne"  aria-label="Filter projects" placeholder="Filter projects" @keyup.enter="searchSix"/>
      </form>
      <table class="table-fixed border-separate border border-green-800">
        <thead>
          <tr>
            <th class="w-1/5 border border-green-600">商品</th>
            <th class="w-1/5 border border-green-600">名称</th>
            <th class="w-1/5 border border-green-600">price</th>
            <th class="w-2/5 border border-green-600">数量</th>
            <th class="w-1/5 border border-green-600">总金额</th>
          </tr>
        </thead>
        <tbody  class="border-none border-green-600">
          <tr v-for="(v,i) in searchData" :key="i">
            <td>
              <div class="text-center">
                <img :src="v.image" />
              </div>
            </td>
            <td>
              {{ v.name }}
            </td>
            <td>
              {{ v.price | priceFilter }}
            </td>
            <td>
              <button class="w-16 items-center justify-center rounded-md border border-gray-300" @click="addOne(i)">+</button>
              {{ v.count }}
              <button class="w-16 items-center justify-center rounded-md border border-gray-300" :disabled="v.count==0" @click="minusOne(i)">-</button>
            </td>
            <td>
              {{ v.countSum | priceFilter(2) }}
            </td>
          </tr>
          <tr>
            <td  colspan="5">
              {{ totalCount }} 件商品已放入购物车，总金额为：{{ totalMoney | priceFilter(2) }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
// import Vue from 'vue'
import { options } from 'less'
import Vue from 'vue'

export default Vue.extend({

  data (){
    interface Goods {
      name: string,
      price: number,
      count: number,
      image: string,
      countSum: number
    }
    const items: Array<Goods> = [
      {name: 'Apples', price: 10, count: 10, countSum:0, image:'/images/fruits/Apple1.png'},
      {name: 'Apricot', price: 15, count: 6, countSum:0, image:'/images/fruits/apricot1.png'},
      {name: 'Xxfruit', price: 25, count: 10, countSum:0, image:'/images/fruits/xxfruit1.png'},
      {name: 'Watermelon', price: 10, count: 1, countSum:0, image:'/images/fruits/watermelon1.png'},
      {name: 'Banana', price: 11, count: 3, countSum:0, image:'/images/fruits/banana1.png'},
      {name: 'Pear', price: 10, count: 10, countSum:0, image:'/images/fruits/pear1.png'},
      {name: 'Cherries', price: 45, count: 5, countSum:0, image:'/images/fruits/cherries1.png'},
      {name: 'Strawberry', price: 16, count: 3, countSum:0, image:'/images/fruits/strawberry1.png'},
      {name: 'Grapes', price: 8, count: 5, countSum:0, image:'/images/fruits/grapes1.png'},
      {name: 'Orange', price: 21, count: 1, countSum:0, image:'/images/fruits/orange1.png'},
      {name: 'Oranges', price: 26, count: 1, countSum:0, image:'/images/fruits/oranges2.png'},
      {name: 'Kiwifruit', price: 21, count: 1, countSum:0, image:'/images/fruits/kiwifruit1.png'},
      {name: 'Pomegranate', price: 21, count: 1, countSum:0, image:'/images/fruits/pomegranate1.png'},
      {name: 'Lemon', price: 12, count: 1, countSum:0, image:'/images/fruits/lemon1.png'}
    ]
    let searchOne: string = ''
    return {
      items,
      searchOne
    }
  },
  // 当加载生命周期钩子调用时，计算每个商品的总价格
  mounted: function (){
    for(let i = 0; i < this.items.length; i++) {
      this.items[i].countSum = this.items[i].price * this.items[i].count
    }
    console.log('Mounted is running')
  },
  methods: {
    // 执行任务的诸多函数集合
    searchSix () {
      return this.searchData
    },

    // 增加或减少商品数量，重新计算商品总价格
    countPlay (myPrice:number, myCount: number, inx: number):number {
      return this.items[inx].countSum = myCount * myPrice
    },

    // 加此商品数量 +1
    addOne (inx: number) {
      this.items[inx].count++
      return this.items[inx].countSum = this.items[inx].price * this.items[inx].count
    },

    // 减此商品数量 -1
    minusOne (inx: number) {
      if (this.items[inx].count>0) {
        this.items[inx].count--
        return this.items[inx].countSum = this.items[inx].price * this.items[inx].count
      }
    }
  },

  // 过滤器
  filters: {
    priceFilter: function (d: number, n: number) {
      return '￥' + d.toFixed(n)
    }
  },

  // 计算属性
  computed: {
    // 模糊查询商品
    searchData: function() {
      if (!this.$data.searchOne) return this.$data.items
      return this.$data.items.filter((item: any) => item.name.includes(this.$data.searchOne))
      // return item.name.indexOf(this.$data.searchOne) !=-1
    },

    // 计算属性的 totalCount
    totalCount: function() {
      // 指向求和的单价对象值
      // 用累加器 reduce()计算购物车的商品数量
      let n: number = this.items.reduce((total: number, cur: any) => {
                          return total + cur.count
                      },0)
      return n
      // let n: number = 0
      // this.items.forEach(function (item,index) {
      //   n+=item.count
      // })
      // return n
    },

    // 用累加器计算购物车商品的总价格
    totalMoney: function() {
      let m: number = this.items.reduce((total: number, cur: any) => {
        return total + cur.count * cur.price
      },0)
      return m
    }
  },

  // 检测
  watch: {
    searchOne: function () {
      console.log(this.searchOne)
    }
  }

  // Vue 模块结尾
})
</script>

<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
@apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

img {
  width: 72px;
  height: 72px;
}
</style>
